import React from 'react'
import { BrowserRouter as Router, Route, Link, NavLink } from "react-router-dom"
import { Popover} from 'antd-mobile';
import Css from './style/common.module.css'
import './style/zujian.css'
import Detail from './detail/index'
import shanchu from './img/删 除.png'

class SearchBarExample extends React.Component {
    constructor(){
        super()
        this.state={
            arr:[],
            history:[]
        }
    }
    componentWillMount(){
        let histor=localStorage.getItem('history')
        if(histor!=null){
            var historr=histor.split(",");
            this.setState({
                history:historr
            })
        }
        fetch('http://106.12.79.128:666/search/hot/')
        .then(body=>body.json())
        .then(res=>{
            this.setState({
                arr:res.result.hots
            })
        })

    }
  del(){
    localStorage.removeItem('history')
    this.setState({
        history:[]
    })
  }

  render() {
    return (
        <div>
        <div className={this.state.history.length!=0?Css.showBox:Css.hiddenBox}>
            <div>
            <p>{this.state.history.length==0?'':'历史记录'}</p>
            <img src={shanchu} alt="" className={this.state.history.length==0?Css.noImg:Css.imgeDel} onClick={this.del.bind(this)}/>
            </div>
            <div className={Css.historySearch}>
                {this.state.history.map((item,index)=>{
                return(
                    <Link to={`/Search/detail?keywords=${item}`}>
                    <div className={Css.liii} key={index}>{item}</div>
                    </Link>
                )
            })}
            </div>
        </div>

        <div className={Css.resou}>
            <p className={Css.resoubang}>热搜榜</p>
            <div className={Css.resouList}>
                <ul className={Css.ul}>{
                    this.state.arr.map((item,index)=>{
                        return(
                            <Link to={`/Search/detail?keywords=${item.first}`}>
                            <li key={index} className={Css.li}>
                                <div className={Css.resouList}>
                                    <div className={Css.id}>
                                        <span className={index>2?Css.colorer:''}>{index+1}</span>
                                    </div>
                                    <div className={Css.name}>
                                        <p className={Css.namee} className={index<3?Css.fontw:''}>{item.first}</p>
                                        <p className={Css.nameee}>超级抓耳的神仙合唱</p>
                                    </div>
                                    <div className={Css.redu}>2696609</div>
                                </div>
                            </li>
                           </Link> 
                        )
                    })
                }</ul>
            </div>
        </div>
        <Router>
            <Route path="/Search/detail" component={Detail}></Route>
        </Router>
        </div>
    )
}
}
export default SearchBarExample